<template>
  <lay-container fluid="true" style="padding: 10px">

    <lay-row :space="10">
      <lay-col :md="24">
        <lay-card>
          <lay-button type="primary" size="sm" @click="add" v-permission="PerKey.UserDept_AddOrEditView"
            prefix-icon="layui-icon-addition">新增</lay-button>
        </lay-card>
      </lay-col>
      <lay-col :md="6" v-for="item in dataSource">
        <lay-card shadow="hover">
          <template v-slot:title>
            <div class="list-header"> ID:{{ item['id'] }}</div>
          </template>
          <template v-slot:body>
            <div class="list">
              <div class="ico">
                <lay-icon :type="item['ico']" size="40px" color="#5FB878"></lay-icon>
              </div>
              <div class="text-name">{{ item['postName'] }}</div>
              <div class="text-code">{{ item['postCode'] }}</div>
              <div class="text-remark">{{ item['remark'] }}</div>
            </div>
          </template>
          <template v-slot:footer>
            <div class="list-footer">
              <lay-button type="primary" size="sm" @click="edit(item['id'])"
                v-permission="PerKey.UserDept_AddOrEditView" prefix-icon="layui-icon-edit">
                编辑</lay-button>
              <lay-button type="danger" size="sm" @click="del(item)" v-permission="PerKey.UserDept_Delete"
                prefix-icon="layui-icon-delete">删除
              </lay-button>
            </div>
          </template>
        </lay-card>
      </lay-col>
    </lay-row>


    <lay-layer :title="addoredittip" v-model="modelVisible" :resize="true" :area="['1000px']"
      :offset="['40%', '50%']">

      <lay-card style="padding:10px;">
        <lay-row space="10">
          <lay-form :model="form">
            <lay-col :md="24">
              <lay-form-item label="岗位名称" prop="postName" required required-error-message="岗位名称不能空">
                <lay-col md="12">
                  <lay-input v-model="form.postName"></lay-input>
                </lay-col>
              </lay-form-item>
              <lay-form-item label="岗位标识" prop="postCode" required required-error-message="岗位标识不能空">
                <lay-col md="6">
                  <lay-input v-model="form.postCode" :disabled="true"></lay-input>
                </lay-col>
                <lay-col md="24" class="tip-postcode">
                  <lay-button @click="postCode('Supreme')">Supreme (所有)</lay-button>
                  <lay-button @click="postCode('Master')">Master (本部及以下)</lay-button>
                  <lay-button @click="postCode('Deputy')">Deputy (本部及以下)</lay-button>
                  <lay-button @click="postCode('Worker')">Worker (本部及自己)</lay-button>
                  <lay-button @click="postCode('Other')">Other (只自己)</lay-button>
                  <br>在资源控制时，根据岗位标识判断
                  <br>具体规则，以网站内容为例：Supreme 具有全部显示权限，Master和Deputy 具有本级部门及以下部门员工资源权限 ， Worker 本级部门全部员工所属资源，
                  Other只有自己本人内容权限
                </lay-col>
              </lay-form-item>
              <lay-form-item label="图标" prop="ico">
                <lay-col md="8">
                  <lay-icon-picker v-model="form.ico" showSearch></lay-icon-picker>
                </lay-col>
              </lay-form-item>
              <lay-form-item label="排序" prop="sort">
                <lay-col md="6">
                  <lay-input v-model="form.sort"></lay-input>
                </lay-col>
                <lay-col md="6" class="tip">只为数字如：2</lay-col>
              </lay-form-item>
              <lay-form-item label="描述" prop="remark">
                <lay-col md="20">
                  <lay-textarea placeholder="请输入描述" v-model="form.remark">
                  </lay-textarea>
                </lay-col>
              </lay-form-item>
              <lay-col :md="24" class="saveBtn">
                <lay-button @click="submitClick" type="primary" v-permission="PerKey.UserPost_AddOrEdit"
                prefix-icon="layui-icon-ok">
                  {{ addoredittip }}
                </lay-button>
              </lay-col>
            </lay-col>
          </lay-form>
        </lay-row>
      </lay-card>

    </lay-layer>

  </lay-container>

</template>
  
<script lang="ts" setup>
import { reactive, ref, toRefs } from "vue";
import { layer } from "@layui/layer-vue";
import { getList, delOne, getEdit, putEdit, postAdd } from "../../../api/module/user/userpost";
import { PerKey } from "../../../library/permissionConst"
import { UserPost } from '../../../types/user'

const dataSource = ref([])

const GetList = function () {
  getList().then((res) => {
    if (res.status == 1) {
      dataSource.value = res.data.data
    }
  })
}


const edit = function (id: number) {
  changeVisible(id)
}
const add = function () {
  changeVisible(0)
}

const del = function (data: any) {
  layer.confirm("确认删除ID: " + data.id + data.postName + " 岗位", {
    title: "警告", move: "true", shade: "false", shadeClose: "true",
    btn: [{
      text: '确认', callback: (layerId: number) => {
        delOne(data.id).then((res) => {
          if (res.status == 1) {
            layer.msg(res.msg, { time: 1000, icon: 1 }, () => {
              GetList()
            });
          } else {
            layer.msg(res.msg);
          }
          layer.close(layerId);
        })
      }
    }, {
      text: '取消', callback: function (layerId: number) {
        layer.close(layerId);
      }
    }]
  })
}

const modelVisible = ref(false)
const data = reactive({
  form: <UserPost><unknown>[]
})


const { form } = toRefs(data)

let addoredittip = ref();

const postCode = (str: string) => {
  form.value.postCode = str;
}

const changeVisible = function (id: number) {
  modelVisible.value = !modelVisible.value
  if (id == 0) {
    addoredittip.value = "新增岗位";
    form.value = {
      id: 0,
      sort: 1,
      postName: "",
      postCode: "",
      ico: "layui-icon-android",
      remark: "",
    }
    return
  } else {
    addoredittip.value = "编辑岗位";
    getEdit(id).then((res) => {
      if (res.status == 1) {
        form.value = res.data.data
      }
    })
    return
  }
}

const submitClick = function () {
  if (!form.value.postName || !form.value.postCode) {
    layer.msg("岗位名称或者岗位标识不能空")
    return
  }
  if (form.value.id == 0) {
    postAdd(form.value).then((res) => {
      done(res)
    });
  } else {
    putEdit(form.value).then((res) => {
      done(res)
    });
  }
};
const done = (res: any) => {
  if (res.status == 1) {
    layer.msg(res.msg, { time: 1000, icon: 1 }, () => {
      modelVisible.value = !modelVisible.value
      GetList()
    });
  } else {
    layer.msg(res.msg, { icon: 2 });
    return false;
  }
}

GetList()


</script>
  
<style scoped>

.tip-postcode {
  margin-top: 10px;
  color: gray;
  line-height: 38px;
  height: inherit;
  padding-left: 0px;
}


.list {
  height: 160px;
  text-align: center;
}

.list .ico {
  width: auto;
  margin-top: 20px;
  height: 40px;
}

.list-header {
  color: rgb(228, 225, 225);
  height: 50px;
  line-height: 50px;
}

.list .text-name {
  font-size: 20px;
  color: #009688;
  height: 40px;
  line-height: 40px;
}

.list .text-code {
  font-size: 18px;
  color: #5FB878;
  height: 30px;
  line-height: 30px;
}

.list .text-remark {
  font-size: 16px;
  color: rgb(159, 158, 158);
  line-height: 25px;
}

.list-footer {
  text-align: right;
}

</style>